<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // General drawing settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = "italic 22px 'Times New Roman'";
    
    // Define origin coordinates
    const oX = 80;
    const oY = 80;

    // 1. Draw Coordinate System
    // x-axis
    drawArrow(ctx, oX, oY, 450, oY);
    ctx.fillText('x', 460, oY + 8);
    // y-axis
    drawArrow(ctx, oX, oY, oX, 350);
    ctx.fillText('y', oX - 5, 365);
    // Origin label
    ctx.fillText('O', oX - 25, oY + 5);

    // 2. Draw the bucket at the origin
    const bucketWidth = 50;
    const bucketHeight = 30;
    ctx.beginPath();
    ctx.rect(oX, oY - bucketHeight, bucketWidth, bucketHeight);
    ctx.stroke();

    // 3. Draw water inside the bucket
    ctx.lineWidth = 1.5;
    // Top water line
    ctx.beginPath();
    ctx.moveTo(oX + 5, oY - bucketHeight + 12);
    ctx.lineTo(oX + bucketWidth - 5, oY - bucketHeight + 12);
    ctx.stroke();
    // Bottom water line
    ctx.beginPath();
    ctx.moveTo(oX + 5, oY - bucketHeight + 20);
    ctx.lineTo(oX + bucketWidth - 5, oY - bucketHeight + 20);
    ctx.stroke();
    ctx.lineWidth = 2; // Reset line width

    // 4. Draw labels and vectors
    // t = 0 label
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText('t = 0', oX, oY - bucketHeight - 10);

    // Acceleration a_0
    const aArrowStartX = oX + bucketWidth + 10;
    const aArrowStartY = oY - bucketHeight / 2;
    const aArrowEndX = aArrowStartX + 70;
    drawArrow(ctx, aArrowStartX, aArrowStartY, aArrowEndX, aArrowStartY);
    
    ctx.font = "italic 22px 'Times New Roman'";
    const aTextX = aArrowEndX + 10;
    const aTextY = aArrowStartY + 8;
    ctx.fillText('a', aTextX, aTextY);
    ctx.font = "italic 16px 'Times New Roman'";
    ctx.fillText('0', aTextX + ctx.measureText('a').width - 2 , aTextY + 5);
    
    // Gravitational acceleration g
    const gArrowStartX = oX + 120;
    const gArrowStartY = oY + 80;
    const gArrowEndY = gArrowStartY + 40;
    ctx.font = "bold 22px 'Times New Roman'";
    drawArrow(ctx, gArrowStartX, gArrowStartY, gArrowStartX, gArrowEndY);
    ctx.fillText('g', gArrowStartX + 10, gArrowStartY + 25);

</script>
</body>
</html>